<template>
  <div
    class="w-full h-header bg-green-50 border-b-green-500 dark:bg-gray-900 dark:border-b-gray-100 dark:text-green-50 border-b min-h-1/8 flex text-center justify-center items-center">
    <!--logo-->
    <div class="flex text-center">
      <div class=" all-center flex">
        <icon-logo class="h-10 w-10 lg:m-0 m-3.5" @click="router.push('/home')"></icon-logo>
      </div>
      <span
        class="hidden text-2xl select-none flex-nowrap lg:flex antialiased mr-8 header-title-font">question compass</span>
    </div>

    <!--导航-->
    <div class="flex justify-between items-center min-w-fit min-h-1/8 header-title-font">
      <div class="text-xl block lg:hidden mr-2 select-none" @click="router.push('/home')">🏚</div>
      <div class="font-semibold lg:mr-3.5 hidden lg:block mr-1 select-none" @click="router.push('/home')">首页</div>
      <div class="text-xl block lg:hidden mr-2 select-none" @click="router.push('/addQuestion')">❓
      </div>
      <div class="font-semibold lg:mr-3.5 hidden lg:block mr-1 select-none" @click="router.push('/addQuestion')">提问
      </div>
      <div class="text-xl block lg:hidden mr-2 select-none" @click="router.push('/heat')">🔥</div>
      <div class="font-semibold lg:mr-3.5 hidden lg:block mr-1 select-none" @click="router.push('/heat')">热榜</div>
    </div>

    <!--搜索框-->
    <el-input
      v-model="searchData"
      :suffix-icon="Search"
      class=" mx-3.5"
      placeholder="搜索问题"
      style="width: 28vw;"
      @change="searchFunc"
    >
    </el-input>

    <!--头像-->
    <el-dropdown>
      <el-avatar
        :src="avatar"
        class=" lg:m-0 m-3.5 right-0"
      />
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="router.push('/personalSpace')">个人主页</el-dropdown-item>
          <el-dropdown-item @click="user.logout()">登出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <!--主题切换-->
    <dark-mode-switch></dark-mode-switch>
  </div>
  <router-view></router-view>
</template>

<script lang="ts" setup>

import DarkModeSwitch from "@/components/headder/darkModeSwitch.vue";
import IconLogo from "@/components/icons/IconLogo.vue";
import router from "@/router";
import useUserStore from "@/store/modules/user";
import { queryUserInfo } from "@/utils/api/user";
import { Search } from "@element-plus/icons-vue";
import { ref } from "vue";

let searchData = ref("");
const user = useUserStore();
const avatar = ref(user.avatar);


queryUserInfo().then((res) => {
  console.log(res);
  avatar.value = "http://81.70.162.219:7345/upload/" + res.data.file_table.file_path;
});

const searchFunc = () => {
  router.push({ name: "displayList", query: { content: searchData.value } });
};

</script>

<style scoped>


.header-title-font {
    font-family: "ComicSansMS-Italic", "Comic Sans MS", Raleway Dots, cursive;

}


</style>
